<template>
  <div class="layout">
    <header class="layout-header">
      <div class="logo">
        <h2>PlayEdu Admin</h2>
      </div>
      <nav class="nav">
        <router-link to="/dashboard">仪表板</router-link>
        <router-link to="/users">用户管理</router-link>
        <router-link to="/courses">课程管理</router-link>
      </nav>
      <div class="user-menu">
        <span>欢迎，管理员</span>
        <button @click="handleLogout">退出</button>
      </div>
    </header>
    
    <main class="layout-content">
      <slot />
    </main>
    
    <footer class="layout-footer">
      <p>&copy; 2024 PlayEdu. All rights reserved.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '../store'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<style lang="less" scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #001529;
  color: white;
  height: 64px;
}

.logo h2 {
  color: white;
  margin: 0;
}

.nav {
  display: flex;
  gap: 20px;
}

.nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav a:hover,
.nav a.router-link-active {
  color: white;
  background-color: #1890ff;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu button {
  background: #1890ff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.layout-content {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
}

.layout-footer {
  text-align: center;
  padding: 20px;
  background-color: #f0f2f5;
  border-top: 1px solid #d9d9d9;
}
</style>